<template>
  <PageLayout>
    <template #extra>
      <div class="bg-fff d-flex j-sb card-list p-24 mb-24">
        <div>
          <div>{{ detail.forcedNum }}</div>
          <div>强制终止</div>
        </div>
        <!-- <div>
          <div>{{ detail.materialsNum }}</div>
          <div>用料耗尽</div>
        </div> -->
        <div>
          <div>{{ detail.abnormalNum }}</div>
          <div>设备异常</div>
        </div>
        <div>
          <div>{{ detail.arrears }}</div>
          <div>欠费</div>
        </div>
      </div>
    </template>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">异常记录</div>
        <a-space :size="16">
          <a-button type="primary" @click="importFile">导出</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postAbnormalRecordPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'actions'">
              <a-space class="space-btn--box" :size="10">
                <a
                  class="btn"
                  v-if="record.status == 0"
                  @click="handler(record)"
                  >处理</a
                >
                <a class="btn" @click="toDetail(record)">详情</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
    <HandleModal
      ref="handleModalRef"
      :data="dataDetail"
      @ok="tableRef.fetch()"
    ></HandleModal>
  </PageLayout>
</template>

<script name="error-list" setup>
import HandleModal from "./components/handle-modal.vue";
import {
  postUserUpdateStatus,
  postAbnormalRecordPage,
  postAbnormalRecordStatistics,
  postAbnormalExport
} from "@/api/system";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();
const route = useRoute();
const router = useRouter();
const queryOptions = ref([
  {
    name: "异常编号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "abnormalNo",
  },
   {
    name: "店铺名",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "shopName",
    labelCol: { width: "120px" },
  },
]);
const columns = [
  // {
  //   title: "序号",
  //   dataIndex: "index",
  //   width: "80px",
  //   customRender: (record) => `${record.index + 1}`,
  // },
  {
    title: "发生时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "异常标的",
    dataIndex: "abnormalObject",
    key: "abnormalObject",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) =>
      record.abnormalObject == 0 ? "设备" : "店铺",
  },
  {
    title: "编号",
    dataIndex: "recordNo",
    key: "recordNo",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "异常编号",
    dataIndex: "abnormalNo",
    key: "abnormalNo",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "异常类型",
    dataIndex: "abnormalTypeStr",
    key: "abnormalTypeStr",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "门店名称",
    dataIndex: "shopName",
    key: "shopName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "商户",
    dataIndex: "shopUserName",
    key: "shopUserName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "商户电话",
    dataIndex: "shopUserPhone",
    key: "shopUserPhone",
    width: "150px",
    ellipsis: true,
  },
  // {
  //   title: "代理商",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },
  {
    title: "客户专员",
    dataIndex: "customerSpecialistName",
    key: "customerSpecialistName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "处理记录",
    dataIndex: "content",
    key: "content",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    key: "actions",
    width: "150px",
    ellipsis: true,
  },
];
const detail = ref({});
onMounted(() => {
  postAbnormalRecordStatistics({
    id: route.query.id,
  }).then((res) => {
    detail.value = res.data;
  });
});

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const toDetail = (record) => {
  const path =
    record.abnormalObject == 1 ? "/store/manage/detail" : "/device/detail";
  const id = record.abnormalObject == 1 ? record.shopId : record.deviceId;
  router.push({
    path,
    query: {
      id,
    },
  });
};

const changeStatus = (record) => {
  const title = record.status == 0 ? "禁用" : "启用";
  comfirmModal({
    content: `确认${title}该账号`,
    onOk() {
      postUserUpdateStatus({
        id: record.id,
        status: record.status == 0 ? 1 : 0,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const dataDetail = ref({});
const handleModalRef = ref(null);
const handler = (record, val) => {
  dataDetail.value = record;
  setTimeout(() => {
    handleModalRef.value.visible = true;
  }, 0);
};


const importFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postAbnormalExport(params).then((res) => {
    message.success("导出成功");
  });
};
</script>

<style lang="less" scoped>
.card-list {
  margin-bottom: 24px;
  display: flex;
  gap: 50px;
  > div {
    // flex: 1;
    width: 400px;
    padding: 10px;
    // height: 100px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    background: #ffcc00;
    > div:first-child {
      font-size: 48px;
      font-weight: 600;
    }
    // &:nth-child(1) {
    //   background: #02a7f0;
    // }
    // &:nth-child(2) {
    //   background: #66cc99;
    // }
    &:nth-child(4) {
      background: #66cc99;
    }
  }
}
</style>
